<my-pageheader></my-pageheader>

<div style="margin: 20px 20px 50px 20px">
    <mat-card style="margin-top: 20px; background-color: #f0f0f0">
        <span style="font-weight: bold; font-size: 28px">我的任务</span>
    </mat-card>
    <mat-card>
        <mat-form-field >
            <mat-select [(ngModel)]="searchTaskStatus" (selectionChange)="refresh()">
                <mat-option value="all">
                    全部
                </mat-option>
                <mat-option value="等待调度">
                    等待调度
                </mat-option>
                <mat-option value="正在执行">
                    正在执行
                </mat-option>
                <mat-option value="成功">
                    成功
                </mat-option>
                <mat-option value="失败">
                    失败
                </mat-option>
            </mat-select>
        </mat-form-field>

        <div *ngIf="tasks">
            <mat-card *ngFor="let task of tasks; trackBy: trackIdentity" style="font-size: 14px; margin: 20px 0; background-color: #fdfdfd">
                <a (click)="viewTaskDetails(task)">
                    <div class="row">
                        <div class="col-md-3">
                            <span style="font-size: 20px">
                                {{task.taskName}}
                            </span>
                            <br>
                            <span>{{task.taskType}}</span>
                        </div>
                        <div class="col-md-2">
                            <span *ngIf="task.taskStatus === '等待调度'" style="color: grey">{{task.taskStatus}}</span>
                            <span *ngIf="task.taskStatus === '正在执行'" style="color: blue">{{task.taskStatus}}</span>
                            <span *ngIf="task.taskStatus === '成功'" style="color: green">{{task.taskStatus}}</span>
                            <span *ngIf="task.taskStatus === '失败'" style="color: red">{{task.taskStatus}}</span>
                            <br>
                            <span>{{task.taskProgress}}%</span>
                        </div>
                        <div class="col-md-7">
                            <span> {{task.description}}</span>
                            <br>
                            <span>
                                {{task.startDate | date:'yyyy-MM-dd HH:mm:ss'}} —— {{task.endDate | date:'yyyy-MM-dd HH:mm:ss'}}
                            </span>
                        </div>
                    </div>
                </a>
            </mat-card>
        </div>

        <br>
        <div>
            <mat-paginator #paginator
                           [length]="totalItems"
                           [pageSize]="itemsPerPage"
                           [pageSizeOptions]="pageSizeOptions"
                           (page)="reloadPage($event)"
                           showFirstLastButtons>
            </mat-paginator>
        </div>
    </mat-card>

</div>


